<template>
	<view class="submit_btn">
		<u-button
			v-if="fixed"
			ripple
			shape="circle"
			:custom-style="btnStyle"
			@click="click($event)"
		>
			{{ text }}
		</u-button>

		<u-button
			v-if="!fixed"
			ripple
			shape="circle"
			:custom-style="{
				backgroundColor: this.backgroundColor,
				color: this.color,
				margin: '56rpx 30rpx',
				height: '88rpx',
				width: 'calc(100% - 60rpx)'
			}"
			@click="click($event)"
		>
			{{ text }}
		</u-button>
	</view>
</template>

<script>
export default {
	props: {
		// 背景色
		backgroundColor: {
			type: String,
			default: '#0049AC'
		},

		color: {
			type: String,
			default: '#fff'
		},

		zIndex: {
			type: String | Number,
			default: 9
		},

		text: {
			type: String,
			default: function () {
				return this.$t('locales.submit')
			}
		},

		fixed: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			btnStyle: {
				backgroundColor: this.backgroundColor,
				color: this.color,
				margin: '56rpx 30rpx',
				height: '88rpx',
				position: 'fixed',
				zIndex: this.zIndex,
				left: 0,
				bottom: 0,
				width: 'calc(100% - 60rpx)'
			}
		}
	},
	methods: {
		// 按钮点击
		click(e) {
			this.$emit('click', e)
		}
	}
}
</script>

<style lang="scss" scoped>
.submit_btn {
	overflow: hidden;
	height: 200rpx;
}
</style>
